<template>
  <div>
    <transition
      :name="transition"
      appear
      :appear-active-class="enterClass"
      :enter-class="enterClass"
      :leave-active-class="leaveClass"
      :leave-class="enterClass"
      @beforeEnter="beforeEnter"
      @afterEnter="afterEnter"
      @beforeLeave="beforeLeave"
      @afterLeave="afterLeave"
    >
      <template v-if="show">
        <div :class="customeClass" class="modal-wrapper" v-show="!isHide">
          <div class="modal-mask" @click="staticDeactive"></div>
          <div
            class="modal-container"
            :class="width ? '' : sizeClass"
            :style="{
							width: width && width.indexOf('%') > -1 ? width : width + 'px',
							minWidth: minWidth && minWidth.indexOf('%') > -1 ? minWidth : minWidth + 'px'
						}"
          >
            <div class="modal-header">
              <slot name="title">
                <h3>{{ titleTxt }}</h3>
              </slot>
              <slot name="modal-icon-close">
                <a class="close" @click.prevent="iconClose" v-if="showCloseIcon">&times;</a>
              </slot>
            </div>
            <slot name="modal-body">
              <div class="modal-body">
                <p>{{ bodyTxt }}</p>
              </div>
            </slot>
            <slot name="modal-footer" v-if="needModalFooter">
              <button
                type="button"
                class="el-button ake_btn ake_btn_text el-button--primary"
              >{{ yesTxt }}</button>
              <button class="ake_btn ake_btn_text modal-close" @click="deactive">{{ cancelTxt }}</button>
            </slot>
          </div>
        </div>
      </template>
    </transition>
  </div>
</template>

<script>
import basicModal from "@mixins/modal/basicModal.js";
export default {
  mixins: [basicModal],
  data() {
    return {};
  }
};
</script>

<style>
.modal-body::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}

.modal-body::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  background: #d4d4d4;
}
</style>

<style lang="less">
@import "../../assets/less/base/variables.less";
@import "../../assets/less/mixins/border-radius.less";
.modalIn,
.modalOut {
  opacity: 0;
  .modal-mask {
    opacity: 0;
  }
  .modal-container {
    transform: scale(0.5);
  }
}
.modal-container .el-table td,
.modal-container .el-table th {
  padding: 10px 16px !important;
}
.modal-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 8%; // padding-bottom: 15%;
  transition: all 0.2s ease;
  z-index: 1600;
  &.multi-calendar-modal {
    z-index: 2500;
    padding-top: 0;
    .modal-container {
      border-radius: 0;
      height: 100%;
      display: flex;
      flex-direction: column;
      .modal-body {
        flex: 1;
        .calendar-wrapper {
          height: 100%;
          display: flex;
          flex-direction: column;
          .calendar-body {
            flex: 1;
            overflow-y: auto;
          }
        }
      }
    }
  }
  .modal-footer {
    .ake_btn {
      height: 32px !important;
      line-height: 32px !important;
      font-size: 14px;
      min-width: 85px;
      letter-spacing: 3px;
      text-indent: 3px;
      padding: 0;
      .el-icon--right {
        margin-left: -5px;
      }
    }
  }
  .el-button:not(".el-transfer__button") {
    height: 32px !important;
    line-height: 32px !important;
    padding: 0 12px !important;
    font-size: 14px;
    min-width: 80px;
  }
}

.modal-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
}

.modal-container {
  overflow-x: hidden;
  background-color: @white;
  border-radius: @spacing / 2;
  z-index: 1600;
  transition: transform 0.3s ease;
  // label-字体
  .el-form-item__label {
    color: #474747;
    position: relative;
    font-size: 14px;
  }
  // 单选框-字体
  .el-radio__label {
    font-size: 14px;
  }
  // 复选框-字体
  .el-checkbox__label {
    color: black !important;
    font-size: 14px;
  }
  // 单位-字体
  .item-unit {
    font-size: 14px;
  }
  // 下拉框选项-字体
  .el-select-dropdown__item {
    span {
      font-size: 14px;
    }
  }
  // 按钮-字体
  .select-park-btn {
    font-size: 14px;
  }

  &.modal-sm {
    width: 396px;
    .modal-body {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  &.modal-md {
    width: 680px;
  }
  &.modal-lg {
    width: 996px;
  }
  .modal-header {
    height: 40px;
    line-height: 40px;
    background-color: @greyF4;
    .border-top-radius(@spacing / 2);
    padding-left: @spacing * 2;
    padding-right: @spacing * 2;
    position: relative;
    color: @black;
    h3 {
      font-size: 16px;
      color: #383838;
    }
    .close {
      position: absolute;
      top: 0px;
      right: @spacing;
      display: inline-block;
      font-size: 24px;
      width: 30px;
      height: 40px;
      text-align: center;
      color: #383838;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .modal-footer {
    height: 60px;
    line-height: 60px;
    border-top: 1px solid #f4f4f4;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    > button {
      &:first-child {
        margin-right: 40px;
      }
    }
  }
  .modal-body {
    min-height: 130px;
    max-height: 500px;
    padding: 30px 20px;
    overflow-y: scroll;
    overflow-x: hidden;
    > p {
      letter-spacing: 1px;
    }
    .form-group {
      width: 100%;
      margin-bottom: @spacing * 2;
    }
  }
}

.ModalBody {
  .HeadMSG {
    display: flex;
    margin-bottom: 10px;
    form:first-child {
      margin-right: 20px;
    }
    > button{
      height: 32px;
      line-height: 32px;
      padding: 0px 20px;
    }
  }
}

.el-input__inner {
  font-size: 14px;
}

.header-box {
  margin-right: 30px;
  display: flex;
  justify-content: space-between;
  .el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: @green;
    border-color: @green;
  }
  .header-selection-group {
    .control-label {
      padding-right: @spacing;
    }
    .select-area {
      max-width: 160px;
    }
  }
}

.payParkValueCSS .table-wrapper {
  height: 200px;
  overflow: hidden;
  .el-table__body-wrapper {
    height: 110px !important;
  }
  .table-box.table-responsive {
    overflow: hidden;
  }
}

.detialModalCSS {
  display: flex;
  .text {
    display: flex;
    flex-direction: column;
    flex: 3;
  }
  .pic2 {
    display: flex;
    flex: 2;
    flex-direction: column;
    justify-content: space-around;
    span {
      height: 45%;
      display: flex;
      flex-direction: column;
      .img {
        vertical-align: middle;
        height: 168px;
        width: 315px;
      }
    }
  }
}

.sp-checkbox {
  display: flex;
  .el-checkbox__input {
    align-self: flex-start;
    padding-top: 3px;
  }
  .el-checkbox__label {
    white-space: pre-wrap;
  }
}
</style>
